<template>
  <div class="u-flex u-aic a-search-field {{isActive ? 'ignore-active' : ''}}">
    <div class="u-flex u-aic a-action">
      <icon size="28rpx" type="search"></icon>
      <van-field
        class="field"
        :style="fieldstyle"
        :value="searchvalue"
        @change="onSearchChange"
        placeholder="{{placeholder}}"
        focus="{{focus}}"
      > </van-field>
      <div style="width: 80rpx; height: 2rpx"></div>
      <image v-if="isActive"
             src="{{src}}"
             capture-catch:tap="bindClear"
             style="padding: 20rpx; right: 12rpx;"
      ></image>
    </div>
    <button
      v-if="isActive"
      @tap="onCancel"
      class="a-search-field-button-cancel"
            hover-class="none">取消</button>
  </div>
</template>

<script>
  export default {
    behaviors: [],
    properties: {
      placeholder: String,
      value: null
    },
    computed: {
      isActive() {
        return this.data.searchvalue && this.data.searchvalue.length > 0
      }
    },
    data() {
      return {
        focus: true,
        fieldstyle: 'flex: 1; margin-left: 17rpx',
        searchvalue: '',
        src: 'http://oss.kaoyanvip.cn/uploads/file1545442649178.png'
      }
    },
    attached() {
      this.setData({
        searchvalue: this.data.value,
        focus: true
      })
    },
    handles: {
      onSearchChange(e) {
        this.setData({
          searchvalue: e.detail
        })
        this.triggerEvent('searchchange', e.detail)
      },
      bindClear(e) {
        console.d('clear')
        this.setData({
          searchvalue: ''
        })
      },
      onCancel(e) {
        this.setData({
          searchvalue: ''
        })
        this.triggerEvent('cancel')
      }
    },
  }
</script>

<style lang="less">
  @import "../../app.component.less";

</style>
